<!--
 * @docName: passwordPage.vue
 * @Author: mwl
 * @Date: 2023/4/20
 * @LastEditors: zhongxiong
 * @LastEditTime: 9:25
-->
<template>
    <div class='content'>
      <div class="box_header">
        <h3>支付密码设置</h3>
        <a-button class="line" @click="goBack">返回</a-button>
      </div>
      <a-form :form="form" style="width: 500px;">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="新支付密码">
          <a-input-password allow-clear placeholder="请输入支付密码" v-decorator="[ 'passwd', validatorRulesSet.passwd]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="确认新支付密码">
          <a-input-password allow-clear @blur="handleConfirmBlur" placeholder="请确认新密码" v-decorator="[ 'passwdOk', validatorRulesSet.passwdOk]" :type="inputType" :autoComplete="autoCom" @change="changeInputType" />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机验证码">
          <a-input type="text" placeholder="请输入手机验证码" v-decorator="[ 'captcha', validatorRulesSet.captcha]"  autocomplete="off" />
          <a-button type="primary" @click="send" style="margin-left:20px;" :disabled="disabledCodeBtn">{{codeText}}</a-button>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
          <a-button type="primary" @click="addCategory">确 认</a-button>
        </a-form-item>

        <!--        <a-form-item>-->
        <!--          <p class="tips" v-if="isShow">您已完成支付密码的设置，如忘记密码，可在此页面进行修改</p>-->
        <!--        </a-form-item>-->
      </a-form>
    </div>
</template>

<script>
import { getSendSmsCaptcha, getSetPaypwd } from '@api/account'
import { encryptIt } from '@/utils/util'
export default {
  name: 'passwordPage',
  data(){
    return{
      my:null,
      myTest:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCs7eVl3hduxnpyKhwI27seelA6cfr0ghTFVsMuaFW68KDa0Xv3NANEQ1YjWYVM/AUllHSDq0ORdIGm2suKCsmGuLnDK1TK7LbOZLgvkDz+Ft+06Y0ZzjILzl0SUtawE+fD6dpebAeD+dOAcl9EzU536ASLx0rsziOZIwcN3aWx5wIDAQAB',
      myPro:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDpIyqMNYBRzfwVhL+P6jav7rGkNZQ0nu+7G7qe1g7mThM9D6Dc717sN1ATDgPxJzgI+NEQ+wx2B1HpUcs4pigyXbnL96qgHrsTe6ZX9YyicsaLz5FM7nujypfVAkfr/VQLEA8z9L7XsAh+Hm6g0WCdSPqdWHY0lS0ImOXth3PgjwIDAQAB',
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form:this.$form.createForm(this),
      validatorRulesSet:{
        passwd:{
          rules: [{
            required: true, pattern: /^\d{6}$/ ,message: '请输入6位数字的新密码!',
          }, {
            validator: this.validateToNextPassword,
          }],
        },
        passwdOk:{
          rules: [{
            required: true,pattern: /^\d{6}$/ , message: '请确认新密码!',
          }, {
            validator: this.compareToFirstPassword,
          }],
        },
        captcha:{
          rules: [{
            required: true, pattern: /^.{6}$/ , message: '请输入六位短信验证码!',
          }],
        },
      },
      autoCom: 'off',
      inputType:'text',
      isShow: false,
      codeText: '发送验证码',
      disabledCodeBtn: false,
    }
  },
  created() {

  },
  methods:{
    //密码不自动带入浏览器保存
    changeInputType(e){
      if(e.target.value !=''){
        this.inputType = 'password'
        this.autoCom = 'new-password'
      }else{
        this.inputType = 'text'
        this.autoCom = 'off'
      }
    },
    handleConfirmBlur  (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    //发送验证码
    send(){
      getSendSmsCaptcha().then(res => {
        if (res.success) {
          this.$message.success('短信发送成功！')
        }else{
          this.$message.warning(res.message)
        }
      })
      this.countDown(60);
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "重新发送验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送验证码(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    //保存
    addCategory(){
      //请求接口
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let params = values;
          if(process.env.VUE_APP_MY_STR == 'test'){
            this.my = this.myTest
            params.passwd = encryptIt(this.my,params.passwd)
            params.passwdOk = encryptIt(this.my,params.passwdOk)
          }else if(process.env.VUE_APP_MY_STR == 'pro'){
            this.my = this.myPro
            params.passwd = encryptIt(this.my,params.passwd)
            params.passwdOk = encryptIt(this.my,params.passwdOk)
          }
          getSetPaypwd(params).then(res => {
            if (res.success) {
              this.$message.success('密码修改成功！')
              this.$router.back()
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    },
    goBack(){
      this.$router.back()
    }
  }
}
</script>

<style lang='less' scoped>
.content{
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  height: 100%;
  .box_header{
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    h3{
      font-size: 28px;
      color: @color-smudge;
      margin-bottom: 0;
    }
  }
}
/deep/.ant-form-item-children{
  display: flex;
}

</style>
